<template>
  <div class="edit">

    <el-dialog title="属性配置" :close-on-click-modal="false" :visible.sync="show" :fullscreen="false" width="900px"
      append-to-body>
      <div class="content">
        <el-form ref="form" :model="form" label-width="120px" label-position="right">
          <el-row>
            <el-col :span="24">
              <el-form-item label="商品名称:">
                {{options.goodsName}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="商品分类:">
                {{options.goodsTypeName}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="规格单位:">
                {{options.standards}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="商品属性:" prop="goodsAttribute">
                <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false"
                  @close="handleClose(tag)">
                  {{tag}}
                </el-tag>
                <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
                  @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
                </el-input>
                <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加</el-button>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="时间范围:" prop="startWeek">
                <el-date-picker v-model="form.startWeek" :clearable="false" type="week" format="yyyy 第 WW 周"
                  value-format="yyyy/MM/dd" placeholder="选择周" @change="handlerTime"
                  :picker-options="{firstDayOfWeek:1}" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label=" " label-width="0px" prop="saleTime" v-loading="loading">
                <div class="list">
                  <div class="list-item" v-for="item in weekData" :key="item.time">
                    <div class="col-1">
                      <div>{{item.title.split('_')[1]}}</div>
                      <div>{{item.title.split('_')[0]}}</div>
                    </div>
                    <div class="col-2">
                      <div>{{item.d}}</div>
                      <div>{{item.m}}</div>
                      <div class="yyyy">{{item.y}}</div>
                    </div>
                    <div class="col-3">
                      <el-input type="textarea" autosize placeholder="请输入内容" v-model="item.attributeDesc" />
                    </div>
                  </div>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer">
        <el-button type="primary" :loading="btnLoading" @click="onSubmit">保 存</el-button>
        <el-button @click="cencel" :disabled="btnLoading">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    attributeDeatils,
    attributeAdd,
    goodsDetail,
    goodsEdit,
    attributeList,
    attributeEdit
  } from "@/api/shopping/content"
  import {
    dateFormat,
    getDAYY,
    getYearWeek
  } from "@/utils/ruoyi"
  export default {
    data() {
      return {
        form: {
          goodsId: '',
          saleTime: '',
          startWeek: ''
        },
        show: false,
        loading: false, //列表加载
        dynamicTags: [],
        inputVisible: false,
        btnLoading: false,
        weekTotal: '', //当前是第几周
        inputValue: '',
        options: {},
        weekData: [],
        details: []
      }
    },
    methods: {
      init(options) {
        this.options = options
        this.dynamicTags = []
        this.handlerTime('start')
        this.show = true
        goodsDetail(options.goodsId).then(res => {
          if (res.data.goodsAttribute) this.dynamicTags = res.data.goodsAttribute.split(',')
        })
      },
      cencel() {
        this.show = false
        this.form.startWeek = ''
        this.dynamicTags = []
        this.btnLoading = false
      },
      async handlerTime(str) { //生成数据
        let lock = false; //要不要减去1
        let arr = [];
        if (!this.form.startWeek) {
          this.form.startWeek = getDAYY(Date.now())
          lock = false
        } else {
          lock = true
        }
        let date = new Date(this.form.startWeek)
        if (lock) date.setDate(date.getDate() - 1)
        this.weekTotal = getYearWeek(date.getFullYear(), date.getMonth() + 1, date.getDate()) - 1

        this.loading = true
        this.details = []
        let res = await attributeList({
          goodsId: this.options.goodsId,
          timeFrame: `${new Date(this.form.startWeek).getFullYear()} 第${this.weekTotal}周`
        })
        this.loading = false
        this.details = res.rows

        for (let i = 0; i < 7; i++) {
          date.setDate(date.getDate() + (i ? 1 : 0))
          let attributeDesc, id;
          if (this.details[i]) {
            attributeDesc = this.details[i].attributeDesc
            id = this.details[i].id
          }

          arr.push({
            m: dateFormat('m', date),
            d: dateFormat('dd', date),
            y: dateFormat('YYYY', date),
            title: ['星期一_Mon', '星期二_Tue', '星期三_Wed', '星期四_Thu', '星期五_Fri', '星期六_Sat', '星期日_Sun'][i],
            attributeDesc,
            markTime: dateFormat('YYYY-mm-dd', date),
            markWeek: i + 1,
            goodsId: this.options.goodsId,
            timeFrame: `${new Date(this.form.startWeek).getFullYear()} 第${this.weekTotal}周`,
            id, //商品属性ID
          })
        }
        this.form.saleTime = `${new Date(this.form.startWeek).getFullYear()} 第${this.weekTotal}周`
        this.weekData = arr
      },
      handleClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      },

      showInput() {
        this.inputVisible = true;
        this.$nextTick(() => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },

      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          this.dynamicTags.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = '';
      },
      onSubmit() {
        let data = {
          goodsAttribute: this.dynamicTags.toString(),
          saleTime: this.form.saleTime,
          goodsId: this.options.goodsId,
          pubGoodsAttributeList: this.weekData.map(item => {
            let {
              attributeDesc,
              goodsId,
              markTime,
              id,
              markWeek,
              timeFrame
            } = item
            return {
              attributeDesc,
              goodsId,
              markTime,
              id,
              markWeek,
              timeFrame
            }
          })
        }
        this.btnLoading = true
        // 判断是否新增
        if (!this.details.length) { //新增
          attributeAdd(data).then(res => {
            console.log('新增属性成功:', res)
            this.cencel()
          })
        } else {
          attributeEdit(data).then(res => {
            console.log('属性修改', res)
            this.cencel()
          })
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .list {
    border: 2px solid #f2f2f2;
    margin-left: 40px;

    .list-item {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 10px 20px;
      cursor: pointer;

      &:hover {
        background-color: rgba(252, 251, 252, 1);
      }

      .col-1 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        line-height: 24px;
      }

      .col-2 {
        margin: 0 80px 0 30px;
        font-size: 24px;
        font-family: 宋体;
        line-height: 28px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;

        .yyyy {
          position: absolute;
          right: -32px;
          color: #f78989;
          bottom: 14px;
          font-size: 12px;
          font-style: italic;
        }
      }

      .col-3 {
        flex: 1;
      }

      &+.list-item {
        border-top: 2px solid #f2f2f2;
      }
    }
  }

  .el-tag+.el-tag {
    margin-left: 10px;
  }

  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }

  .content {
    padding-right: 50px;
  }
</style>
